<template>
  <div ref="container" class="bg">
    <slider ref="slider" :options="options">
      <slideritem
        v-for="(item, index) in someList"
        :key="index"
        :style="item.style"
      >
    <div
      class="canvas-container"
      :style="{
        transform: `scale(${scaleData})`,
        width: changeStyleWithScale(canvasStyle.width) + 'px',
        height: changeStyleWithScale(canvasStyle.height) + 'px',
        background: canvasStyle.backgroundColor,
      }"
    >
      <ComponentWrapper
        v-for="(item, index) in copyData"
        :key="index"
        :config="item"
      />
    </div>
    </slideritem>
      <div slot="loading">loading...</div>
    </slider>
  </div>
</template>

<script>
import { getStyle, getCanvasStyle } from '@/utils/style';
import { mapState } from 'vuex';
import ComponentWrapper from '@/components/Editor/ComponentWrapper';
import Shape from '@/components/Editor/Shape';
import { changeStyleWithScale } from '@/utils/translate';
import { toPng } from 'html-to-image';
import { deepCopy } from '@/utils/utils';
import { slider, slideritem } from 'vue-concise-slider'

export default {
  components: {
    ComponentWrapper, Shape,
    slider,
    slideritem
  },
  props: {
    isScreenshot: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      copyData: [],
      scaleData: 1,
      canvasStyle: JSON.parse(window.localStorage.getItem('canvasStyle')),
      someList: [
        {
          html: 'slide1',
          style: {
            // 'background': '#fff'
          }
        },
      ],
      options: {
        currentPage: 0,
				effect:'slide', // 切换效果，默认为滚动滑动('slide'),可设置为渐变滑动('fade'),旋转滚动('coverflow')
        loop: true,
        itemAnimation: true,
        centeredSlides: true,
        loopedSlides: 2,
        slidesToScroll: 1,
				speed: 1000,
				timingFunction: 'ease',
				preventRebound: true, // 阻止回弹
				pagination: false
      }
    };
  },
  computed: mapState([
    'componentData',
  ]),
  created() {
    // if (this.componentData.length) {
    //   this.$set(this, 'copyData', deepCopy(this.componentData))
    // } else {
    const data = JSON.parse(window.localStorage.getItem('canvasData'));
    // let i = 1
    // let j = 2
    // setInterval(() => {
    //   data[0].propValue.option.series.data = [i++, j++, 3, 4, 5, 6]
    //   this.$set(this, 'copyData', data)
    // }, 1000);
    this.$set(this, 'copyData', data);
  },
  mounted() {
    this.scaleData = window.innerWidth / this.canvasStyle.width;
    window.onresize = () => {
      this.scaleData = window.innerWidth / this.canvasStyle.width;
    };

    // this.setLanguage();

    this.$refs.slider.$emit('autoplayStart', 3000)
  },
  methods: {
    getStyle,
    getCanvasStyle,
    changeStyleWithScale,

    htmlToImage() {
      toPng(this.$refs.container.querySelector('.canvas'))
        .then((dataUrl) => {
          const a = document.createElement('a');
          a.setAttribute('download', 'screenshot');
          a.href = dataUrl;
          a.click();
        })
        .catch((error) => {
          console.error('oops, something went wrong!', error);
        })
        .finally(this.close);
    },
    setLanguage() {
      window.sessionStorage.setItem('language', 'en');
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
	::-webkit-scrollbar{
		display: none;
	}
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
	.slider-container {
  	overflow-y: auto;
	}

  .canvas-container {
    // width: 100vw;
    // height: 100vh;
    overflow: auto;
    position: absolute;
    top: 0;
    left: 0;
    transform-origin: left top;
		font-size: 16px;

    .canvas {
      background: #fff;
      position: relative;
      margin: auto;
    }
  }
  .close {
    position: absolute;
    right: 20px;
    top: 20px;
  }
}

.slider-item {
  transform: scale(0.8);
  transition-timing-function: ease;
  transition-duration: 2000ms;
}
.slider-item.slider-active {
  transform: scale(1);
  z-index: 999;
}
.slider-item.slider-active-copy {
  transform: scale(1);
  z-index: 999;
}
</style>
